import { Image, Row, Col } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import ProForm, {
  ProFormSelect,
  ProFormTimePicker,
} from "@ant-design/pro-form";
import useCommonTable from "@/hooks/useCommonTable";

import { fetchList, add, update, remove } from "@/api/dishTime";
import { dishTimeTypeList } from "@/const";

export default () => {
  const columns = [
    {
      title: "餐品时间段",
      dataIndex: "type",
      search: false,
      valueType: "select",
      fieldProps: {
        options: dishTimeTypeList,
      },
    },
    {
      title: "送达时间",
      dataIndex: "timePeriod",
      search: false,
    },
  ];

  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <ProFormSelect
          width="lg"
          name="type"
          label="餐品时间段"
          allowClear
          fieldProps={{
            options: dishTimeTypeList,
          }}
          rules={[{ required: true, message: "请选择餐品时间段" }]}
        />

        <ProFormTimePicker
          width="lg"
          label="送达时间"
          name="timePeriod"
          placeholder={"请选择送达时间"}
          fieldProps={{
            format: "HH:mm",
            // disabledDate: (current) => {
            //   return (
            //     current &&
            //     current <= moment().endOf("day") - 8.64e7
            //   );
            // },
          }}
          rules={[
            {
              required: true,
              message: "请选择送达时间",
            },
          ]}
        />
      </>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        title: "餐品时间",
        columns,
        renderFormItem,
        modalWidth: 500,
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
